<template>
    <div>
        <h1>{{$route.meta.title}}</h1>
        <el-form label-position="right" label-width="80px">
            <el-form-item label="商品名称">
                <el-input :value="data.name"></el-input>
            </el-form-item>
            <el-form-item label="商品描述">
                <el-input :value="data.subtitle"></el-input>
            </el-form-item>
            <el-form-item label="当前状态">
                <el-input :value="data.status==1?'在售':'已下架'"></el-input>
            </el-form-item>
            <el-form-item label="所属分类">
                <el-select :value="value" popper-class="active common" placeholder="请选择">
                    <el-option v-for="item in option" :label="item.label" :value="item.id" :key="item.value">{{item.name}}
                    </el-option>
                </el-select>
                <el-select v-if="second.length" :value="value2" popper-class="active" placeholder="请选择">
                    <el-option v-for="item in second" :label="item.label" :value="item.id" :key="item.value">{{item.name}}
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input :value="data.price">
                    <el-button slot="append">元</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="商品库存">
                <el-input :value="data.stock">
                    <el-button slot="append">件</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="商品图片">
                <el-image v-for="(item,index) in subImage" :key="index" :src="data.imageHost+item"></el-image>
            </el-form-item>
            <el-form-item label="商品详情">
                <el-input v-html="data.detail"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { shopDetail, addShop } from "@/utils/api";
export default {
    data() {
        return {
            data: {},
            option: [],
            second: [],
            value: "请选择一级品类",
            value2: "请选择二级品类",
            parentId: 0,
            categoryId: 0,
        };
    },
    created() {
        shopDetail(this.$route.query.id).then((res) => {
            this.data = res.data.data;
            this.categoryId = res.data.data.categoryId;
            this.parentId = res.data.data.parentCategoryId;
            if (res.data.data.parentCategoryId == 0) {
                this.parentId = res.data.data.categoryId;
            }
        });
        //   一级品类
        addShop(0).then((res) => {
            this.option = res.data.data;
            console.log(this.parentId);
            this.option.forEach((item) => {
                if (item.id == this.parentId) {
                    this.value = item.name;
                }
            });
            if (this.parentId == 0) {
                return;
            }
            addShop(this.parentId).then((res) => {
                this.second = res.data.data;
                this.second.forEach((item) => {
                    if (item.id == this.categoryId) {
                        console.log(1);
                        this.value2 = item.name;
                    }
                });
            });
        });
    },
    computed: {
        subImage() {
            if (this.data.subImages) {
                return this.data.subImages.split(",");
            }
        },
    },
};
</script>

<style lang="scss" scoped>
h1 {
    font-weight: normal;
}
.el-form {
    width: 70%;
}
/deep/ {
    .el-select {
        margin: 0 10px;
        .el-input__inner {
            background-color: #ededed;
        }
    }
    .el-form-item {
        .el-image {
            width: 80px;
            height: 80px;
            margin: 0 10px;
            vertical-align: middle;
        }
    }
    .el-form-item:last-child {
        margin-top: 40px;
        p {
            margin: 0;
        }
    }
}
</style>